<template>
  <view class="map_box">
    <map 
      id="navi_map" 
      :longitude="longitude" 
      :latitude="latitude" 
      :scale="12" 
      :markers="markers"
      style="width: 100%; height: 100%;">
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 121.517439,
      latitude: 31.34541,
      markers: [{
        id: 0,
        latitude: 31.34541,
        longitude: 121.517439,
        width: 23,
        height: 33
      }, {
        id: 1,
        latitude: 31.281641,
        longitude: 121.558293,
        width: 24,
        height: 34
      }]
    }
  },
  onLoad() {
    // 使用条件编译处理不同平台的模块导入
    // #ifdef H5 || APP-PLUS
    try {
      const amapFile = require('../../libs/amap-wx.130.js');
      var myamap = new amapFile.AMapWX({key: '85695250f2cb61f0f5c8bdaf93697cbc'});
    } catch (e) {
      console.error('H5/APP平台地图SDK加载失败:', e);
    }
    // #endif
    
    // #ifdef MP-WEIXIN
    // 微信小程序使用uni.chooseLocation或其他腾讯地图方案
    // #endif
  }
}
</script>

<style>
.map_box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#navi_map {
  width: 100%;
  height: 100%;
}
</style>